<template>
  <el-row>

    <el-col v-for="(item, index) in productList" :key="index">
      <br>

      <el-card class="box-card" shadow="hover" @click.native="buy(item.productId,item.loanTime,item.productLoanAmount)">

        <el-descriptions title="产品信息">
          <el-descriptions-item label="产品编号" :contentStyle='contentStyle' :labelStyle='labelStyle' hidden>{{
              item.productId
          }}</el-descriptions-item>
          <el-descriptions-item label="产品名称" :contentStyle='contentStyle' :labelStyle='labelStyle'>{{
              item.productName
          }}</el-descriptions-item>
          <el-descriptions-item label="产品类型" :contentStyle='contentStyle' :labelStyle='labelStyle'><el-tag
              size="small">{{ item.productType | productType }}</el-tag></el-descriptions-item>
          <el-descriptions-item label="贷款额度" :contentStyle='contentStyle' :labelStyle='labelStyle'>{{
              item.productLoanAmount
          }}</el-descriptions-item>
          <el-descriptions-item label="贷款利率" :contentStyle='contentStyle' :labelStyle='labelStyle'><el-tag
              size="small">{{ item.productRate  | numformat }}</el-tag></el-descriptions-item>
          <el-descriptions-item label="贷款期限" :contentStyle='contentStyle' :labelStyle='labelStyle'><el-tag
              size="small">{{ item.loanTime }}</el-tag></el-descriptions-item>
          <el-descriptions-item label="产品介绍" :contentStyle='contentStyle' :labelStyle='labelStyle'>{{
              item.productLoanAmount
          }}</el-descriptions-item>


        </el-descriptions>

      </el-card>

    </el-col>    

  </el-row>
</template>

<script>



export default {
  data() {
    
    return {
      productList: {},
      selLike: {
        productName: "",
        currentPage: 1,
        pageSize: 5
      },
      product: {},
      updateProduct: {},
      dialog: {
        updateshow: false,
      },
      contentStyle: {
        'text-align': 'center',
      },
      labelStyle: {
        'width': '100px'
      }
    };
  },
  methods: {
    addP() {
      this.$router.replace("/AddLoan");
    },
    loadProduct() {
      this.$axios.get("/products/selectAll").then((res) => {
        this.productList = res.data.data.product;
      });
    },
    buy(productId,loanTime,productLoanAmount){
      //存产品id往后传入。
      localStorage.setItem("loanTime", JSON.stringify(loanTime));
      localStorage.setItem("productLoanAmount", JSON.stringify(productLoanAmount));
      localStorage.setItem("productId", JSON.stringify(productId));
      // alert(productId);
      this.$router.push("/UserXINXI");
    }
  },
  mounted() {
    this.loadProduct();
  },
  

};
</script>
<style>
.box-card {
  width: 1000px;
  align-content: center;
  margin-left: 270px;
}
</style>
